<template>
  <!--  投资者关系 -->
  <div class="investorsPc" v-if="this.typePc == 1">
    <img class="banner" :src="banner?.[0]?.webimages" />
    <div class="box">
      <div class="left">
        <!-- 投资者关系 -->
        <div class="menu-box">
          <div class="title">{{ $utils.getNavName("investors") }}</div>
          <div class="line"></div>
          <div
            :class="index == currentTabs ? 'tabs-selected' : 'tabs'"
            v-for="(item, index) in tabs"
            :key="item"
            @click="tabClick(index)"
          >
            {{ item.name }}
          </div>
        </div>
        <!-- 股票 -->
        <div class="stock-box" v-if="stock">
          <div class="title">{{ data?.serviceContent?.pagetitle_1 }}</div>
          <div class="line-short"></div>
          <div class="line"></div>
          <div class="name">
            {{ stock?.stock_name + "" + stock?.stock_num }}
          </div>
          <div class="price-box">
            <div
              class="price"
              :style="
                stock?.stock_gain >= 0.0 ? 'color: #d60000;' : 'color: #50bc0f;'
              "
            >
              {{ stock?.stock_price }}
              <span class="gain">
                {{
                  (stock?.stock_gain >= 0.0 ? "+" : " ") + stock?.stock_gain
                }}&nbsp;&nbsp;{{ stock?.stock_gain_per }}</span
              >
              <img
                class="ic-arrow"
                v-if="stock?.status"
                src="../../../assets/image/investors/rise.png"
              />
              <img
                class="ic-arrow"
                v-else
                src="../../../assets/image/investors/fall.png"
              />
            </div>
          </div>
          <div class="time">{{ $utils.getCurrentdate() }}</div>
        </div>
        <!-- 媒体 -->
        <div class="media-box">
          <div class="title">{{ data?.serviceContent?.pagetitle_2 }}</div>
          <div class="line-short"></div>
          <div class="line"></div>
          <div class="frame">
            <a
              :href="item.url"
              target="_blank"
              class="item"
              v-for="item in releaseMedia"
              :key="item"
            >
              <img class="img" :src="item.webimage" />
              <div class="name">{{ item.name }}</div>
            </a>
          </div>
        </div>
        <!-- 联系人 -->
        <div class="contact-box">
          <div class="title">{{ data?.serviceContent?.pagetitle_3 }}</div>
          <div class="line-short"></div>
          <div class="line"></div>
          <div class="item">
            <div class="img">
              <img
                class="ic"
                src="../../../assets/image/investors/ic_tel.png"
              />
            </div>

            <div class="name">热线：</div>
            <div class="value">{{ data?.serviceContent?.hotline }}</div>
          </div>
          <div class="item">
            <div class="img">
              <img
                class="ic"
                src="../../../assets/image/investors/ic_fax.png"
              />
            </div>

            <div class="name">传真：</div>
            <div class="value">{{ data?.serviceContent?.fax }}</div>
          </div>
          <div class="item">
            <div class="img">
              <img class="ic" src="../../../assets/image/investors/email.png" />
            </div>

            <div class="name">邮件：</div>
            <div class="value">{{ data?.serviceContent?.mail }}</div>
          </div>
        </div>
      </div>
      <div class="right">
        <router-view v-slot="{ Component }">
          <component :is="Component" @change="routerChange" />
        </router-view>
      </div>
    </div>
  </div>
  <!-- 移动端 -->
  <div class="investorsMobile" v-if="this.typePc == 2">
    <img class="banner" :src="banner?.[0]?.mobileimages" />
    <div class="box">
      <div class="left">
        <!-- 股票 -->
        <div class="stock-box" v-if="stock">
          <div class="title">{{ data?.serviceContent?.pagetitle_1 }}</div>
          <div class="line-short"></div>
          <div class="line"></div>
          <div class="name">
            {{ stock?.stock_name + "" + stock?.stock_num }}
          </div>
          <div class="price-box">
            <div
              class="price"
              :style="
                stock?.stock_gain >= 0.0 ? 'color: #D60000;' : 'color: #50bc0f;'
              "
            >
              {{ stock?.stock_price }}
              <span class="gain">
                {{
                  (stock?.stock_gain >= 0.0 ? "+" : "") + stock?.stock_gain
                }}&nbsp;&nbsp;&nbsp;
                <div class="view"></div>
                &nbsp;&nbsp;{{ stock?.stock_gain_per }}</span
              >
              <img
                class="ic-arrow"
                v-if="stock?.status"
                src="../../../assets/image/investors/rise.png"
              />
              <img
                class="ic-arrow"
                v-else
                src="../../../assets/image/investors/fall.png"
              />
            </div>
          </div>
          <div class="time">{{ $utils.getCurrentdate() }}</div>
        </div>

        <div class="router">
          <router-view v-slot="{ Component }">
            <component :is="Component" @change="routerChange" />
          </router-view>
        </div>
        <!-- 联系人 -->
        <div class="contact-box">
          <div class="title">{{ data?.serviceContent?.pagetitle_3 }}</div>
          <div class="line-short"></div>
          <div class="line"></div>
          <div class="item">
            <div class="img">
              <img
                class="ic"
                src="../../../assets/image/investors/ic_tel.png"
              />
            </div>

            <div class="name">热线：</div>
            <div class="value">{{ data?.serviceContent?.hotline }}</div>
          </div>
          <div class="item">
            <div class="img">
              <img
                class="ic"
                src="../../../assets/image/investors/ic_fax.png"
              />
            </div>

            <div class="name">传真：</div>
            <div class="value">{{ data?.serviceContent?.fax }}</div>
          </div>
          <div class="item">
            <div class="img">
              <img class="ic" src="../../../assets/image/investors/email.png" />
            </div>

            <div class="name">邮件：</div>
            <div class="value">{{ data?.serviceContent?.mail }}</div>
          </div>
        </div>
        <!-- 媒体 -->
        <div class="media-box">
          <div class="title">{{ data?.serviceContent?.pagetitle_2 }}</div>
          <div class="line-short"></div>
          <div class="line"></div>
          <div class="frame">
            <a
              :href="item.url"
              target="_blank"
              class="item"
              v-for="item in releaseMedia"
              :key="item"
            >
              <img class="img" :src="item.mobileimage" />
              <div class="name">{{ item.name }}</div>
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tabs: [
        // { label: "投资者服务", value: 1, path: "/investorsService" },
        // { label: "最新公告", value: 2, path: "/investorsNotice" },
        // { label: "定期报告", value: 3, path: "/investorsReport" },
      ],
      currentTabs: 0,
      menu: [],
      data: {},
      banner: null,
      stock: null,
      releaseMedia: [],
      typePc: 0, //1Pc 2移动
    };
  },
  mounted() {
    if (document.body.clientWidth <= 1200) {
      this.typePc = 2;
    } else {
      this.typePc = 1;
    }
    this.menu = JSON.parse(localStorage.getItem("nav"));
    // this.tabs = this.menu[4]?.children;
    this.tabs.push(this.$utils.getNavClass("investorsService"));
    this.tabs.push(this.$utils.getNavClass("investorsNotice"));
    this.tabs.push(this.$utils.getNavClass("investorsReport"));
    this.getData();
  },
  methods: {
    async getData() {
      try {
        const [banner, left, stock, releaseMedia] = await Promise.all([
          this.$request.get("/khcommon/banner", {
            params: {
              navId: this.$utils.getNavId("investors"),
            },
          }),
          //投资者关系页面内容
          this.$request.get("/Investorservices/InvestorRelationsPage"),
          //股票信息
          this.$request.get("/Investorservices/stockInformation"),
          //发布媒体
          this.$request.get("/Investorservices/releaseMedia"),
        ]);
        this.banner = banner.data;
        this.data = left.data;
        //涨跌 加标识字段
        if (stock.data.stock_gain >= 0) {
          stock.data["status"] = true;
        } else {
          stock.data["status"] = false;
        }
        this.stock = stock.data;
        this.releaseMedia = releaseMedia.data;
      } catch (e) {
        // 错误状态
        this.$message.error(e.message);
      }
    },

    /**
     * tabs 点击事件
     */
    tabClick(i) {
      this.currentTabs = i;
      this.$router.push({
        name: this.tabs[i].rote,
        query: { id: this.tabs[i].id },
      });
    },

    /**
     * 媒体信息跳链接
     */

    /**
     * 手动切换菜单
     */
    routerChange(i) {
      this.currentTabs = i;
    },
  },
};
</script>
<style lang="scss" scoped>
@media screen and (min-width: 1200px) {
  .investorsMobile {
    display: none;
  }

  .investorsPc {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f8f8f8;

    .banner {
      @include fn.fluidContainer;
      height: 375px;
      object-fit: cover;
    }

    .box {
      @include fn.container;
      margin-top: 30px;
      margin-bottom: 40px;
      display: flex;
      justify-content: space-between;

      .left {
        //   height: 1040px;
        width: 284px;
        display: flex;
        flex-direction: column;
        //   justify-content: space-between;

        .menu-box {
          width: 284px;
          height: 283px;
          background: #fff;
          border-radius: 10px;
          display: flex;
          flex-direction: column;
          align-items: center;

          .title {
            margin-top: 30px;
            font-size: 30px;

            font-weight: bold;
            color: color.$base;
          }

          .line {
            margin-top: 12px;
            width: 205px;
            height: 2px;
            background: color.$base;
          }

          .tabs {
            margin-top: 20px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            color: color.$base;
            font-size: 26px;

            font-weight: 400;
            width: 203px;
            height: 40px;
          }

          .tabs-selected {
            margin-top: 20px;
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            font-size: 26px;

            font-weight: 400;
            width: 203px;
            height: 40px;
            background: color.$base;
            border-radius: 20px;
          }
        }

        .stock-box {
          margin-top: 20px;
          width: 284px;
          height: 222px;
          background: #fff;
          border-radius: 10px;

          .title {
            margin-top: 16px;
            margin-left: 16px;
            font-size: 20px;

            font-weight: bold;
            color: #333333;
            line-height: 19px;
          }

          .line {
            margin-left: 14px;
            width: 258px;
            height: 1px;
            background: color.$base;
          }

          .line-short {
            margin-top: 10px;
            width: 81px;
            margin-left: 14px;
            width: 84px;
            height: 2px;
            background: color.$base;
          }

          .name {
            margin-left: 18px;
            margin-top: 33px;
            font-size: 24px;

            font-weight: 400;
            color: #eb7803;
            line-height: 19px;
          }

          .price-box {
            .price {
              font-family: "微软雅黑";
              margin-top: 26px;
              margin-left: 18px;
              font-size: 29px;

              font-weight: 550;

              //     color: #333333;
              .ic-arrow {
                height: 16px;
                width: 16px;
                margin-left: 8px;
              }

              .gain {
                font-family: "微软雅黑";
                //    color: #d60000;
                font-size: 20px;
              }
            }
          }

          .time {
            margin-top: 14px;
            margin-left: 19px;
            font-size: 16px;

            font-weight: 400;
            color: #888888;
            letter-spacing: 1px;
          }
        }

        .media-box {
          margin-top: 20px;
          width: 284px;
          //  height: 236px;
          background: #ffffff;
          border-radius: 10px;
          padding-bottom: 20px;

          .title {
            margin-top: 16px;
            margin-left: 16px;
            font-size: 20px;

            font-weight: bold;
            color: #333333;
            line-height: 19px;
          }

          .line {
            margin-left: 14px;
            width: 258px;
            height: 1px;
            background: color.$base;
          }

          .line-short {
            margin-top: 10px;
            margin-left: 14px;
            width: 120px;
            height: 2px;
            background: color.$base;
          }

          .frame {
            margin-top: 22px;
            margin-left: 12px;
            width: 260px;
            //   height: 139px;
            border: 1px solid #eeeeee;
            display: flex;
            box-sizing: border-box;
            padding: 6px;
            // align-items: center;
            // justify-content: space-around;
            flex-wrap: wrap;

            .item {
              box-sizing: border-box;
              margin: 5px;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              width: 70px;
              height: 100px;
              align-items: center;

              .img {
                width: 70px;
                height: 70px;
                border: 1px solid #eeeeee;
              }

              .name {
                font-size: 12px;

                font-weight: 400;
                color: #333333;
              }
            }
          }
        }

        .contact-box {
          box-sizing: border-box;
          margin-top: 20px;
          overflow: hidden;
          width: 284px;
          //    height: 239px;
          background: #fff;
          border-radius: 10px;
          padding-bottom: 10px;

          .title {
            margin-top: 16px;
            margin-left: 16px;
            font-size: 20px;

            font-weight: bold;
            color: #333333;
            line-height: 19px;
          }

          .line {
            margin-left: 14px;
            width: 258px;
            height: 1px;
            background: color.$base;
            margin-bottom: 30px;
          }

          .line-short {
            margin-top: 10px;
            margin-left: 14px;
            width: 100px;
            height: 2px;
            background: color.$base;
          }

          .item {
            overflow: hidden;
            margin-top: 10px;
            //   height: 30px;
            display: flex;
            align-items: center;
            box-sizing: border-box;

            img {
              // margin-top: 6px;
              margin-left: 14px;
              border-radius: 6px;
              background: color.$base;
              display: flex;
              align-items: center;
              justify-content: center;

              .ic {
                height: 26px;
                width: 26px;
              }
            }

            .name {
              box-sizing: border-box;
              // width: 60px;
              margin-left: 6px;
              font-size: 16px;

              font-weight: 400;
              color: #888888;
              line-height: 40px;
            }

            .value {
              // margin-top: 10px;
              box-sizing: border-box;
              word-break: break-all;
              //   overflow: hidden;
              width: 180px;
              font-size: 16px;

              font-weight: 400;
              color: #333333;
              //   line-height: 48px;
            }
          }
        }
      }

      .right {
        box-sizing: border-box;
        padding: 40px 0;
        width: 896px;
        display: flex;
        background: #fff;
        flex-direction: column;
        border-radius: 10px;
      }
    }
  }
}
</style>
<style scoped lang="scss" >
@media screen and (max-width: 1200px) {
  .investorsPc {
    display: none;
  }

  .investorsMobile {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #f8f8f8;

    .banner {
      width: 100%;
      height: fn.rpx(660);
    }

    .box {
      width: 100%;
      margin-top: fn.rpx(30);
      margin-bottom: fn.rpx(40);
      display: flex;
      flex-direction: column;

      .left {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .stock-box {
          width: fn.rpx(700);
          height: fn.rpx(400);
          background: #fff;
          border-radius: fn.rpx(10);

          .title {
            margin-top: fn.rpx(20);
            margin-left: fn.rpx(30);
            font-size: fn.rpx(26);

            font-weight: bold;
            color: #333333;
            line-height: fn.rpx(19);
          }

          .line {
            margin-left: fn.rpx(30);
            width: fn.rpx(650);
            height: fn.rpx(1);
            background: color.$base;
          }

          .line-short {
            margin-top: fn.rpx(20);
            margin-left: fn.rpx(30);
            width: fn.rpx(100);
            height: fn.rpx(2);
            background: color.$base;
          }

          .name {
            margin-left: fn.rpx(30);
            margin-top: fn.rpx(40);
            font-size: fn.rpx(59);

            color: color.$base;
            letter-spacing: fn.rpx(6);
          }

          .price-box {
            font-family: "微软雅黑";
            .price {
              margin-top: fn.rpx(20);
              margin-left: fn.rpx(30);
              font-size: fn.rpx(60);

              font-weight: bold;

              .ic-arrow {
                height: fn.rpx(24);
                width: fn.rpx(24);
                margin-left: fn.rpx(10);
              }

              .gain {
                margin-left: fn.rpx(20);
                font-size: fn.rpx(30);
                .view {
                  display: inline-block;
                  width: fn.rpx(2);
                  height: fn.rpx(24);
                  background: #eeeeee;
                }
              }
            }
          }

          .time {
            margin-top: fn.rpx(30);
            margin-left: fn.rpx(40);
            font-size: fn.rpx(30);

            font-weight: 400;
            color: #888888;
            letter-spacing: fn.rpx(6);
          }
        }

        .media-box {
          margin-top: fn.rpx(30);
          width: fn.rpx(700);
          // height:fn.rpx( 236);
          background: #ffffff;
          border-radius: fn.rpx(10);

          .title {
            margin-top: fn.rpx(30);
            margin-left: fn.rpx(30);
            font-size: fn.rpx(26);

            font-weight: bold;
            color: #333333;
            line-height: fn.rpx(19);
          }

          .line {
            margin-left: fn.rpx(30);
            width: fn.rpx(650);
            height: fn.rpx(1);
            background: color.$base;
          }

          .line-short {
            margin-top: fn.rpx(20);
            margin-left: fn.rpx(30);
            width: fn.rpx(120);
            height: fn.rpx(2);
            background: color.$base;
          }

          .frame {
            margin-top: fn.rpx(30);
            margin-bottom: fn.rpx(30);
            margin-left: fn.rpx(30);
            width: fn.rpx(640);
            // height: fn.rpx(300);
            border: fn.rpx(1) solid #eeeeee;
            display: flex;
            //  justify-content: space-around;
            //  align-items: center;
            box-sizing: border-box;
            flex-wrap: wrap;
            padding: fn.rpx(10);

            .item {
              margin: fn.rpx(11);
              display: flex;
              flex-direction: column;
              justify-content: space-around;
              width: fn.rpx(180);
              height: fn.rpx(230);
              align-items: center;

              .img {
                width: fn.rpx(180);
                height: fn.rpx(230);
                border: fn.rpx(1) solid #eeeeee;
              }

              .name {
                font-size: fn.rpx(28);

                font-weight: 400;
                color: #333333;
              }
            }
          }
        }

        .contact-box {
          overflow: hidden;
          margin-top: fn.rpx(30);
          padding-bottom: fn.rpx(20);
          width: fn.rpx(700);
          // height: 239px;
          background: #fff;
          border-radius: fn.rpx(10);
          box-sizing: border-box;

          .title {
            margin-top: fn.rpx(20);
            margin-left: fn.rpx(30);
            font-size: fn.rpx(26);

            font-weight: bold;
            color: #333333;
            line-height: fn.rpx(19);
          }

          .line {
            margin-left: fn.rpx(30);
            width: fn.rpx(650);
            height: fn.rpx(1);
            background: color.$base;
            margin-bottom: fn.rpx(20);
          }

          .line-short {
            margin-top: fn.rpx(20);
            margin-left: fn.rpx(30);
            width: fn.rpx(100);

            height: fn.rpx(2);
            background: color.$base;
          }

          .item {
            overflow: hidden;
            margin-left: fn.rpx(10);
            //  height: fn.rpx(60);
            display: flex;
            align-items: center;

            img {
              overflow: hidden;

              margin-left: fn.rpx(17);
              border-radius: fn.rpx(6);
              background: color.$base;
              // display: flex;
              // align-items: center;
              // justify-content: center;
              width: fn.rpx(32);
              height: fn.rpx(32);
              object-fit: contain;

              .ic {
                height: fn.rpx(60);
                width: fn.rpx(60);
              }
            }

            .name {
              margin-left: fn.rpx(10);
              font-size: fn.rpx(20);

              font-weight: 400;
              color: #888888;
              line-height: fn.rpx(48);
            }

            .value {
              overflow: hidden;
              word-break: break-all;
              width: fn.rpx(440);
              font-size: fn.rpx(20);

              font-weight: 400;
              color: #333333;
              line-height: fn.rpx(48);
            }
          }
        }
      }

      .router {
        box-sizing: border-box;
        margin-top: fn.rpx(30);
        width: fn.rpx(700);
        display: flex;
        // background: #fff;
        flex-direction: column;
        border-radius: fn.rpx(10);
      }
    }
  }
}
</style>